<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
	<script type="text/javascript">
		//<![CDATA[
		//debe usarse los \\:  en lugar de : en los selectores de JQuery
		$(document).ready(function() {
			wizardSetCurrentPageStyle('form_wizard:contactData');
		});
		//]]>
	</script>
</h:head>
<h:body>
	<h:form id="form_contact_data">
		<h2>
			<h:outputLabel value="#{i18n['lbl.owner.contact_data.title']}" />
		</h2>

		<div class="clearfix common-panel">
			<div class="ui-form-row-2col clearfix">
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel value="#{i18n['lbl.owner.contact_data.phone']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:inputText maxlength="22"
							value="#{aSession.selectedRuatRegister.telephone}">
							<pe:keyFilter mask="int" />
						</p:inputText>
					</div>
				</div>
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel value="#{i18n['lbl.owner.contact_data.cell']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:inputMask value="#{aSession.selectedRuatRegister.cellphone}"
							mask="999-9999999" required="true" requiredMessage="#{i18n['cmpnt.required']}"/>
					</div>
				</div>
			</div>
			<div class="ui-form-row-2col clearfix">
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel id="email"
							value="#{i18n['lbl.owner.contact_data.email']}" />
						<p:watermark for="email"
							value="#{i18n['wmrk.owner.contact_data.email']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:inputText maxlength="30"
							value="#{aSession.selectedRuatRegister.email}">
							<pe:keyFilter mask="email" />
						</p:inputText>
					</div>
				</div>
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel value="#{i18n['lbl.owner.contact_data.address']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:inputText maxlength="30"
							value="#{aSession.selectedRuatRegister.address}" required="true" requiredMessage="#{i18n['cmpnt.required']}"/>
					</div>
				</div>
			</div>
			<br />
			<p:panel id="locations" styleClass="clearfix">
				<br />
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel
							value="#{i18n['lbl.owner.contact_data.department']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:selectOneMenu
							value="#{aSession.selectedRuatRegister.departament}"
							styleClass="ui-width-xxxs" required="true"
							requiredMessage="#{i18n['cmpnt.required']}">
							<f:selectItem itemLabel="#{i18n['cmpnt.select_one']}"
								itemValue="" noSelectionOption="true" />
							<f:selectItems value="#{locationController.departments}" />
							<p:ajax event="change" update="locations"
								listener="#{locationController.toogleDeparment}" />
						</p:selectOneMenu>
					</div>
				</div>
				<br />
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel
							value="#{i18n['lbl.owner.contact_data.municipality']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:selectOneMenu immediate="true"
							value="#{aSession.selectedRuatRegister.municipality}"
							required="true" requiredMessage="#{i18n['cmpnt.required']}">
							<f:selectItem itemLabel="#{i18n['cmpnt.select_one']}"
								itemValue="" noSelectionOption="true" />
							<f:selectItems value="#{locationController.municipalities}" />
							<p:ajax event="change" update="locations"
								listener="#{locationController.toogleMunicipality}" />
						</p:selectOneMenu>
					</div>
				</div>
				<br />
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel value="#{i18n['lbl.owner.contact_data.village']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:selectOneMenu immediate="true"
							value="#{aSession.selectedRuatRegister.village}" required="true"
							requiredMessage="#{i18n['cmpnt.required']}">
							<f:selectItem itemLabel="#{i18n['cmpnt.select_one']}"
								itemValue="" noSelectionOption="true" />
							<f:selectItems value="#{locationController.villages}" />
							<p:ajax event="change" update="locations"
								listener="#{locationController.toogleVillage}" />
						</p:selectOneMenu>
					</div>
				</div>
			</p:panel>
		</div>

		<div class="buttons-container clearfix text-align-right">
			<p:commandButton value="#{i18n['lbl.flow_button.cancel']}"
				styleClass="ui-flowbutton"
				oncomplete="currentPage('list_owner_data.xhtml')"
				actionListener="#{stepByStepController.cancelRuatRegister}" />
			<p:commandButton value="#{i18n['lbl.flow_button.back']}"
				oncomplete="setCurrentPageStyle(xhr, status, args,this)"
				styleClass="ui-flowbutton" update="form_contact_data"
				actionListener="#{stepByStepController.viewPersonalData}" />
			<p:commandButton value="#{i18n['lbl.flow_button.save_and_next']}"
				oncomplete="setCurrentPageStyle(xhr, status, args,this)"
				styleClass="ui-flowbutton" validateClient="true"
				update="form_contact_data"
				actionListener="#{stepByStepController.viewEconomicData}"
				id="savenext" />
		</div>
		<p:blockUI block="savenext" trigger="savenext">
		</p:blockUI>
	</h:form>
</h:body>

</html>